<template>
<div>

  <el-menu  :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item style="  background-image: inherit;" index="1"  >
      <img src="../assets/Logo.png" style="width: 35px;height: 35px;" alt=""/>
      CHANGE
      <el-divider direction="vertical"></el-divider>
    </el-menu-item>

    <el-menu-item index="2"  @click="toComponents(0)"  >
      <div  style="width: 80px;height: 20px;margin: 0 10px" >
      <span  class="iconfont icon-yin-yang"> </span>
      首页
      </div>
    </el-menu-item>

    <el-menu-item index="3" @click="toComponents(1)"  >
      <div  style="width: 80px;height: 20px;margin: 0 10px" >
      <span class="iconfont icon-yijing"></span>
      学习中心
      </div>
    </el-menu-item>

    <el-menu-item index="5"  @click="toComponents(3)" >
      <!--      <el-divider direction="vertical"></el-divider>-->
      <div  style="width: 80px;height: 20px;margin: 0 10px" >
        <span class="iconfont icon-jiaoliuzhongxin" ></span>
        网站相关
      </div>
      <!--      <el-divider direction="vertical"></el-divider>-->
    </el-menu-item>


    <el-menu-item index="6"    >
      <div  style="width: 80px;height: 20px;margin: 0 10px" @click="devople" >
        <span class="iconfont icon-jiaoliuzhongxin"  ></span>
        学习论坛
      </div>
      <!--      <el-divider direction="vertical"></el-divider>-->
    </el-menu-item>

    <el-menu-item index="7"  style=" " >
      <div style="width: 100px;height: 50px;">
        <span class="iconfont icon-zaixianrenyuan" ></span>
        当前在线人数: {{userCount}}
      </div>
    </el-menu-item>

<!--    <el-menu-item index="5" @click="toPage('/exchange')" >交流空间</el-menu-item>-->
    <el-menu-item index ="8" v-if="isLogState"  style="float: right" >
      <el-dropdown>
        <div  class="user-center"   >
          <i
              class="el-icon-user-solid"></i>
          <span>个人中心</span>
        </div>
        <el-dropdown-menu  >
          <el-dropdown-item >
            <span @click="toComponents(4)">个人中心</span>
          </el-dropdown-item>
          <el-dropdown-item>消息中心</el-dropdown-item>
          <el-dropdown-item >
          <span @click="logout" >登出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </el-menu-item>
    <el-menu-item v-if="!isLogState" index="6" style="float: right" @click="toPage('/login')"  >登录</el-menu-item>
    <el-menu-item v-if="!isLogState"  index="7"  style="float: right" @click="toPage('/register')" >注册</el-menu-item>
  </el-menu>
  <el-divider></el-divider>
</div>

</template>
<script>


import HomeView from "@/views/HomeView.vue";
import ExchangeView from "@/components/webIntri.vue";
import LearnPage from "@/components/Learn.vue";
import ShowPage from "@/components/Show.vue";
import {get, post} from "@/utils/http";
import setstorage from "@/utils/setstorage";

export default {
  name: "layout",
  components: {ShowPage, LearnPage, ExchangeView, HomeView},
  data(){
    return {
      activeIndex:'1',
      imgPath: "../assets/Logo.png",
      componentValue:0,
      isLogState:false,
      count:0
    }
  },
  props:{
    userCount:0
  },
  mounted() {
       let res =  setstorage.getItem('token')
       if(res != null && res != undefined &&res!=false){
         this.isLogState = true
       }

  },
  methods:{

    getUserCount(e){

    },
    devople() {
      this.$notify({
        title: '提示',
        message: '该功能正在开发中',
        duration: 0
      });
    },

    handleSelect(){
    },
    toComponents(e){
      this.$emit('child-event', e )
       this.componentValue = e
    },

   // (){
   //    let res =  localStorage.getItem('token')
   //    console.log(res!=null)
   //    console.log(res!=undefined)
   //    if(res != null && res != undefined){
   //      return true
   //    }
   //    console.log(res!=null)
   //    return false
   //  },
    toPage(e){
      let path = this.$route.path
      console.log(e)
      if(path !== e) {

        this.$router.push(e)
      }
    },

    logout(){
       this.isLogState = false
      post("/logout",{}).then(e=>{
        console.log(e['data'])
        localStorage.removeItem('token')
        this.$router.push('/login')
      })


    }

  }
}
</script>

<style scoped>

.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 75px;
  line-height: 70px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #909399;
}

.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid #95bdab;
  color: #303133;
}
.el-divider--horizontal {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin:  0;
}


.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: white;
   font-family: "Britannic Bold", serif;
  color: #000710;
}
.el-dropdown-menu__item {
  height: 30px;
  font-family: "Britannic Bold", serif;
}
.el-dropdown-menu__item[data-v-ecebbf8c]:focus, .el-dropdown-menu__item[data-v-ecebbf8c]:not(.is-disabled):hover {
  font-family: "Britannic Bold", serif;
  color: #000710;
  background-color: white;
}
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {

  color: #66b1ff;
}
.user-center{
  width: 120px;
  height:60px;
  border-radius: 10px;

}
.el-menu--horizontal>.el-menu-item{
  color: #000710;
}

title{
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;

}
.el-menu.el-menu--horizontal{
  font-family: "Britannic Bold",serif;
  color: #000710;
  border-bottom: none;
  background-image: inherit;
}
.el-icon-user-solid{

}
.is-expanded {
  width: 500px;
  height: 400px; /* 调整为你想要的扩展尺寸 */
}
</style>